<template>
  <div class="contain">
    <div class="content">
      <OrderSearch />
      <el-button style="margin:20px 0 10px 0;background:#438dee" type="primary">添加操作员</el-button>
      <el-card style="width:1200px">
        <el-table
          :data="tableData"
          style="width: 1200px"
          :header-cell-style="{background: '#e2ecfb',color:'#000'}"
          :cell-style="cellStyle"
        >
          <el-table-column
            header-align="center"
            align="center"
            type="index"
            width="100"
            :index="indexMethod"
          />
          <el-table-column
            align="center"
            prop="goods"
            label="姓名"
          />
          <el-table-column
            align="center"
            prop="classify"
            label="手机号"
          />
          <el-table-column
            align="center"
            prop="money"
            label="所属部门"
          />
          <el-table-column
            align="center"
            prop="num"
            label="状态"
          />
          <el-table-column
            align="center"
            prop="status"
            label="备注"
          />
          <el-table-column
            align="center"
            prop="address"
            label="操作"
            width="200"
          >
            <template #default>
              <el-button type="primary" style="background:#199ed8;color:#fff">编辑</el-button>
              <el-button type="primary" style="background:#fff;color:#438df1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div class="pagination">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 1,
      page: 1,
      cellStyle: {
        borderBottom: '2px solid #e2ecfb'
      },
      tableData: [{
        goods: '小米蓝夜耳机(故宫特质版本)',
        classify: '耳机',
        money: '￥396.00',
        num: 100,
        status: '上架',
        check: '审核通过'
      }, {
        goods: '小米蓝夜耳机(故宫特质版本)',
        classify: '耳机',
        money: '￥396.00',
        num: 200,
        status: '上架',
        check: '审核通过'
      }]
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1 + (this.page - 1) * 10
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin: 80px 30px;
}
.pagination{
  margin-top: 30px;
}
.el-card{
  ::v-deep.el-card__body{
    padding: 0;
    border: 0;
  }
}
</style>
